<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <div id="app">
<!--                     style="width: 100%; height: 100%"-->

        <p>{{message}}</p>
         <iframe
             :src="pageUrl"
             frameborder="0"

            :height="height"
            width="100%"
             id="myiframe"
            name="myiframe"
            scrolling="auto"

         ></iframe>
    </div>

<script>
    {# 模板地址: http://127.0.0.1:8000/api/myHtml/show.html#}

    new Vue({
          el: '#app',
          data: {
            message: '菜鸟教程1111',
            pageUrl: '/api/template/pdfjs/web/viewer.html?file=..\\..\\doc\\333.pdf',
              height: "100%",
          },

        mounted: function () {
                console.group('mounted 挂载结束');
                console.log("el: " + this.$el);
                console.log("data: " + this.$data);
                console.log("message: " + this.message);

                // console.log('!!!!!!!!!!!!!! changeFrameHeight');
                // var iframe = document.getElementById("myiframe");
                // console.log('~~~~~~~~~~~~~~ iframe', iframe);
                // iframe.height = document.documentElement.clientHeight;


                 let _this = this;//赋值vue的this
                  window.onresize = ()=>{
            　　　　//调用methods中的事件
                    _this.changeFrameHeight()
                  };
                  console.log('================================== 1111111');

            _this.changeFrameHeight();

        },
        methods: {
            change() {
                app.message++;
            },
            destr() {
                app.$destroy();
            },
            changeFrameHeight() {
                console.log('---------------------------! changeFrameHeight');
                var iframe = document.getElementById("myiframe");
                console.log('=== iframe',  document.documentElement.clientHeight);
                // iframe.style.height = document.documentElement.clientHeight + 'px';
                this.height = document.documentElement.clientHeight + 'px';
            }
        },
    })
</script>

</body>

</html>

<!--                // this.changeFrameHeight();-->


<!--            // onload() {-->
<!--            //       console.log('11111111111');-->
<!--            //-->
<!--            //     function changeFrameHeight() {-->
<!--            //         var iframe = document.getElementById("myiframe");-->
<!--            //         iframe.height = document.documentElement.clientHeight;-->
<!--            //     }-->
<!--            //     changeFrameHeight();-->
<!--            //     //onresize属性可以用来获取或设置当前窗口的resize事件的事件处理函数-->
<!--            //     //onresize事件会在窗口或框架被调整大小时发生-->
<!--            //     // window.onresize = function() {-->
<!--            //     //     changeFrameHeight();-->
<!--            //     // }-->
<!--            // }-->